<template>
  <div id="app">
    <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
    >
    </vue-particles>
    <router-view></router-view>
    <div class="login">
      <div class="common-layout">
        <el-container>
          <el-aside class="loginLeft">
            <img class="imgSrc" src="@/assets/login.png" alt="" />
          </el-aside>
          <el-main class="loginRight">
            <el-card class="box-card">
              <div class="card-word">
                <div class="top-word">经济学行为决策实验平台</div>
                <div class="bottom-word">
                  Behavior decision-making experimental platform
                </div>
              </div>
              <div class="card-input">
                <a-space>
                  <a-input v-model="seatID" :style="{width:'19rem',height:'2.2rem'}" placeholder="请输入座位号" allow-clear />
                </a-space>
              </div>
              <div class="card-button">
                <a-button type="primary" :disabled="state" size="large" @click="btnTest()" shape="round">开始实验</a-button>
<!--                <el-button type="primary"  size="large" @click="btnTest()" shape="round">开始实验</el-button>-->
              </div>
            </el-card>
            <div class="description">
<!--              <div class="logo"></div>-->

              <div class="tel">服务电话：0400-12345678</div>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/index'
// import { onMounted, reactive, toRefs } from 'vue'
export default {
  // setup () {
  //   const state = reactive({
  //     list: []
  //   })
  //   // 调取api获取数据
  //   const getNewsList = () => {
  //     const params = {
  //       seatID: 11,
  //     }
  //     login(params).then(res => {
  //       console.log(res)
  //       const { data } = res
  //       state.list = data.data
  //     })
  //   }
  //   onMounted(getNewsList)
  //   // ...toRefs()将state里面得对象解构
  //   return {
  //     ...toRefs(state)
  //   }
  // },
  // eslint-disable-next-line
  name: 'Login',

  data( ) {
    return {
      seatID: '',
      state:true
    }
  },

  mounted() {},

  watch: {
    // eslint-disable-next-line
    seatID: function (newVal, oldVal) {
      if (newVal != '') {   //15秒的倒计时结束
       this.state = false
      }
      if (newVal == '') {   //15秒的倒计时结束
        this.state = true
      }
    }
  },
  methods: {
    getLogin(seatID){
      // console.log(seatID)
      login({seatID}).then(res=>{

        // if(res.isSeatValid==false)
        // {
        //   this.$router.push({ name: 'Welcome' })
        // }
        // else {
        //   this.$message.error('座位号重复登录!')
        // }
        this.$router.push({ name: 'Welcome' })
      })
    },

    btnTest() {    //点击登录按钮
      if(this.seatID)
      {
        this.$store.state.seatID = this.seatID   //vux 全局赋值seatID
        // this.$store.commit("getSeatID")
        this.getLogin(this.seatID)
        //已经输入了座位号
      }
      else {
        this.handleClick()
      }
    },
    handleClick() {  //提示信息
      this.$message.error('请先输入您的座位号!')
    }
  }
}
</script>

<style lang="scss" scoped>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position:fixed;
}

.login {
  position: relative;
  height: 100%;
  width: 100%;

  //border: 1px solid #000;
  .common-layout {
    height: 100%;
    width: 100%;
    display: flex;
    .loginLeft {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      //background-color: #eaeff9;
      .imgSrc {
        width: 50%;
        height: 50%;
      }
    }

    .loginRight {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      //padding: 0;
      :deep(.box-card) {
        width: 55%;
        height: 60%;
        margin-inside: 0;
        .el-card__body {
          //width: 100%;
          height: 100%;
          margin-bottom: 1rem;
          //margin: 0.3rem;
          //padding: 10px;
          .card-word {
            width: 100%;
            height: 25%;
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
              //margin-inside: 5%;
            .top-word {
              margin-inside: 10%;
              width: 100%;
              font-size: 2em;
              font-weight: 600;
              color: #4a78ff;
              display: flex;
              //padding: 10%;
              justify-content: center;
            }
            .bottom-word {
              font-size: 0.95em;
              width: 100%;
              color: #4a78ff;
              display: flex;
              justify-content: center;
              //margin-inside: 10%;
            }
          }
          .card-input {
            padding: 0.7rem;
            width: 95%;
            height: 45%;
            display: flex;
            justify-content: center;
            align-items: center;
            .el-input {
              width: 80%;
              height: 25%;
              font-size: 28px;
              font-family: Arial, Helvetica, sans-serif;
              .el-input--suffix {
                .el-input__wrapper {
                  height: 20%;
                  width: 80%;
                  .el-input__inner {
                    font-weight: bold;
                  }
                }
              }
            }
          }
          .card-button {

            width: 100%;
            //height: 45%;
            display: flex;
            justify-content: center;
            .el-button {

              height: 10%;
              width: 80%;
              font-size: 28px;
              font-weight: 700;
              border-radius: 10px;
              //background-color: #125dff;
              background-color: #20cdff;
            }
          }
        }
      }
      .description {
        position: absolute;
        bottom: 10%;
        width: 25%;
        height: 10%;
        //display: flex;
        //.logo {
        //  width: 50%;
        //  height: 100%;
        //  display: flex;
        //  justify-content: center;
        //  align-items: center;
        //  background-image: url('../assets/jishu.png');
        //  background-repeat: no-repeat, repeat;
        //  background-size: 100% 100%;
        //  z-index: -999;
        //}
        .tel {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
        }
      }
    }
  }
}
</style>